<template>
  <div class="tab1">
    <p>最受好评电影</p>
    <div class="wrapper">
      <ul>
        <li v-for="item in tab1list" :key="item._id">
          <div class="imgbox">
            <img :src="item.imgUrl" alt="" />
            <span v-if="item.score">观众评分：{{item.score}}</span>
            <span v-if="item.wishNum">{{item.wishNum}}人想看</span>
          </div>
          <p>{{item.title}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import BetterScroll from "better-scroll";
export default {
  // computed: mapState(["tab1list"]),
  computed: mapState({ tab1list: state => state.index.tab1list }),

  created() {
    this.getTab1DataAsc().then(() => {
      new BetterScroll(".wrapper", {
        scrollX: true,
        scrollY: false,
        click: true
      });
    });
  },

  methods: {
    ...mapActions(["getTab1DataAsc"])
  }
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
.tab1 {
  width: 100%;
  padding: 12px 0 12px 15px;
  background-color: #fff;
  margin-bottom: 10px;
  height: 200px;

  p {
    font-size: @s-size;
    text-align: left !important;
  }
  ul {
    margin-top: 10px;
    height: 145px;
    display: inline-flex;
    // overflow: auto;

    li {
      margin-right: 10px;
    }
    .imgbox {
      position: relative;
      width: 85px;
      height: 115px;
      img {
        width: 85px;
        height: 115px;
      }
      span {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 85px;
        height: 35px;
        font-size: @xs-size;
        color: #faaf00;
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.8),
          rgba(0, 0, 0, 0)
        );
        display: flex;
        flex-direction: column-reverse;
        padding-bottom: 5px;
      }
    }
    p {
      font-weight: 900;
      margin-top: 5px;
      width: 85px;
      .ellipsis();
    }
  }
}
</style>
